<template>
    <div>
        <Form :model="formItem" :label-width="300" label-position="right">
            <Card :bordered="false" style="background:#fff;padding: 20px;width: 60vw;">
                <p slot="title">广告管理</p>

                <FormItem label="广告图片：">
                    <input type="file" @change="up_img($event,'pic')" accept="image/*">
                    <div class="picDiv">
                        <img class="pic" v-if="!formItem.pic.length" :src="defaultPic">
                        <div class="picBox" v-else v-for="(item, index) in formItem.pic" :key="index">
                            <img class="pic" :src="item">
                            <p class="close" @click="del_img(index,'pic')">
                                <img src="@/assets/images/close.png" />
                            </p>
                        </div>
                    </div>
                </FormItem>
                <Button type="primary" class="sure_btn" @click="save">保存</Button>
            </Card>
        </Form>

    </div>
</template>
<script>
    import {
        mapMutations
    } from 'vuex'

    import axios from '@/libs/api.request'
    export default {
        name: 'adv',
        data() {
            return {
                defaultPic: require('@/assets/images/addressAddBtn_03.jpg'),

                // 新增楼层对象
                formItem: {
                    advid: 1,
                    pic: []
                }
            }
        },
        methods: {
            // 获取广告详情
            get_adv_detail() {
                let data = {
                    advid: 1
                }
                axios.ajax_post('admin-adv-ajax_get_adv_detail', data).then(res => {
                    if (res.data.code === 1) {
                        this.formItem = res.data.data.detail
                        this.formItem.advid = this.formItem.id
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },



            // 上传图片
            up_img(e, mk) {
                this.formItem[mk] = []
                const file = e.target.files
                for (let i = 0; i < file.length; i++) {
                    // up_to_cos 第二个参数表示返回的url类型
                    // 0：cos，1：cdn,2:带图片处理的cdn
                    axios.up_to_oos(file[i], (file_url) => {
                        this.formItem[mk].push(file_url)
                    })
                }
            },

            // 删除图片
            del_img(index, mk) {
                this.formItem[mk].splice(index, 1)
            },
            // 保存
            save() {
                let {
                    ...data
                } = this.formItem

                axios.ajax_post('admin-adv-ajax_save_adv', data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.get_adv_detail()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            }
        },
        created() {
            this.get_adv_detail()
        }
    }
</script>
<style lang="less" scoped>
    .FormItemInput {
        width: 20vw;

        &.inline {
            width: 9vw;
            margin-right: 28px;

            &:nth-of-type(2n) {
                margin-right: 0;
            }
        }
    }

    .picDiv {

        display: flex;
        justify-content: flex-start;
        position: relative;
        padding-top: 15px;
    }

    .picDiv .pic {
        width: 300px;
    }

    .picBox {
        position: relative;
        width: 300px;
        margin-right: 10px;
    }

    .close {
        position: absolute;
        top: -7px;
        right: -7px;
        cursor: pointer;
    }


    .sure_btn {
        margin-left: 20vw;
        width: 10vw;
    }
</style>